<template>
    <div class="watchContainer" style="padding: 0 20px;">
        <!-- 连接后台的 -->
        <el-dialog 
            top="24vh" 
            v-model="linkVisable"
            :title="$t(titleList[activeIndex - 1])"
            width="30%"
            center
            draggable
            @close="closeDialog"
        >
            <el-input v-model="store.userInfo.username" disabled v-if="activeIndex === 1" />
            <el-input v-model="linkCode" v-else></el-input>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="linkVisable = false" v-if="activeIndex === 1">{{ $t("message.cancel") }}</el-button>
                <el-button @click="beforeStep" v-else>{{ $t("message.prev") }}</el-button>
                
                <el-button type="primary" @click="confirmLink" v-if="activeIndex === 2">
                  {{ $t("message.confirm") }}
                </el-button>
                
                <el-button type="primary" @click="nextStep" v-else>
                  {{$t("message.next")}}
                </el-button>
            </span>
            </template>
        </el-dialog>
        <el-steps :active="activeIndex" v-if="stepVisable">
            <el-step title="Step 1" :description="$t('system.link_desc')" />
            <el-step title="Step 2" :description="$t('system.set_link')" />
            <el-step title="Step 3" :description="$t('setting.link_success')" />
        </el-steps>
        <div class="tool">
            <el-button type="warning" @click="openWebsocket" v-if="!isWatch">{{ $t("setting.start_listen") }}</el-button>
            <el-button type="danger" @click="closeWebsocket" v-else>{{ $t("setting.close_link") }}</el-button>
        </div>

        <div class="table">
            <el-table 
                :data="deviceList"
                border 
                stripe 
           >
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="deviceName" :label="$t('setting.device_id')"></el-table-column>
            <el-table-column prop="linkCode" :label="$t('setting.linkCode')"></el-table-column>
            <el-table-column prop="linkTime" :label="$t('setting.linkTime')"></el-table-column>
            <el-table-column >
                <template #header>
                    {{ $t("setting.device_type") }}
                </template>
                <template #default="{row}">
                    <el-tag class="ml-2" type="success" v-if="!row.type">{{ $t("setting.computer") }}</el-tag>
                    <el-tag class="ml-2" type="info" v-else>{{ $t("setting.cell_phone") }}</el-tag>
                    </template>
            </el-table-column>
            <el-table-column>
                <template #header>{{ $t("setting.operate") }}</template>
                <template #default="{row}">
                    <el-button type="danger" @click="closeLink(row.deviceName)">{{ $t("setting.disconnect") }}</el-button>
                </template>
            </el-table-column>
           </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Watch"
})
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { moduleStore } from '../../store/module';
import { storeToRefs } from 'pinia';
const module_store = moduleStore()
const { module_num, selectModule } = storeToRefs(module_store)
import { userStore } from '../../store/user';
const user_store = userStore()
const { deviceList } = storeToRefs(user_store)
import indexDb from '../../local/indexDb';
const dbReady = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const tableData = ref([])
const loading = ref(false)

onMounted(async () => {
  await indexDb.openDb()
  dbReady.value = true
  loadData()
})

const loadData = async () => {
  if (!dbReady.value) return
  loading.value = true
  try {
    const count = await indexDb.getTotalCount()
    total.value = count
    const data = await indexDb.getData(pageSize.value, (currentPage.value - 1) * pageSize.value)
    tableData.value = data
  } catch (error) {
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  loadData()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1 //  回到第一页
  loadData()
}

const clearData = async () => {
  await indexDb.clearData()
  ElMessage.success('数据已全部清除')
  loadData()
}
</script>
</script>

<style scoped lang="less">
 .tool {
       padding-top: 10px;
    }
    .el-step {
        margin-top: 10px;
    }
    .el-table {
        margin-top: 10px;
    }
</style>